<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
	body{
		margin:0;
		background:black;
		overflow:hidden;
	}
	#heart{
		width:300px;
		height:480px;
		position:absolute;
		left:0;
		right:0;
		top:0;
		bottom:0;
		margin: auto;
		animation:rot 5s linear infinite;
		transform-style:preserve-3d;
	}
	@keyframes rot{
		from{
			transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
		}
		to{
			transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
		}
	}
	#heart div{
		width:300px;
		height:480px;
		border:2px solid red;
		border-left:0;
		border-bottom:0;
		border-radius:50% 50% 0/50% 40% 0;
		position:absolute;
	}
  </style>
 </head>
 <body>
	<div id="heart">
	</div>
	<script type="text/javascript">
		var oHeart = document.getElementById('heart');

		for(var i = 0; i < 36; i++){
			var oDiv = document.createElement('div');
			oDiv.style.transform = "rotateY("+(i * 10)+"deg) rotateZ(45deg) translateX(90px)";
			oDiv.style.borderColor = getColor();
			oHeart.appendChild(oDiv);
		}
		function random(min, max){
			return Math.floor(Math.random() * (max - min + 1) + min);
		}
		function getColor(){
			return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
		}
	</script>
 </body>
</html>
